<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
<script src="static/echarts.min.js"></script>
<script src="static/jquery-3.2.1.js"></script>
<script src="static/china.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FYHKG1DGcIUEX36Gecx7GuO5vkPxqFhz">
       //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
       //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
       </script>

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
         data = [];
         $.post('servlet/HelloLaoGuo').done(function(dataformback) {
          data = eval(dataformback);
          console.log(data);
 res =[];
var convertData = function (data) {
    var geo = new BMap.Geocoder();


   for (var i = 0; i < data.length; i++) {
    //  var city=data[i];
       (function(city){
         geo.getPoint(city.cityName,function(point) {
         if (point) {

              //经度
              var pointx = point.lng;


              //纬度
             var pointy = point.lat;
             var geoCoord =[];
             geoCoord.push(pointx);
             geoCoord.push(pointy);
             console.log(geoCoord);
                 //console.log(geoCoord);
                 //console.log(data);
                // console.log(city);
             res.push({
                 name: city.cityName,//data[i].name,
                 value:geoCoord.concat(city.pv)
             });
             //console.log(res);
                 // console.log("...................................");
                 // console.log(res);
                 // console.log("....................................");
         }
        functest();
       });
       })(data[i]);
    //   geo.getPoint(data[i].name,function(point) {
    //   if (point) {
    //
    //        //经度
    //        var pointx = point.lng;
    //
    //
    //        //纬度
    //       var pointy = point.lat;
    //       var geoCoord =[];
    //       geoCoord.push(pointx);
    //       geoCoord.push(pointy);
    //       console.log(geoCoord);
    //           //console.log(geoCoord);
    //           //console.log(data);
    //           console.log(city);
    //       res.push({
    //           name: city.name,//data[i].name,
    //           value:geoCoord.concat(city.value)
    //       });
    //       //console.log(res);
    //           // console.log("...................................");
    //           // console.log(res);
    //           // console.log("....................................");
    //   }
    // });
   // 初始化地图，设置中心点坐
    //  console.log(geoCoord);
    //     if (geoCoord) {
    //         res.push({
    //             name: data[i].name,
    //             value: geoCoord.concat(data[i].value)
    //         });
    //     }
   }

};

option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['pm2.5'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: res,
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data:[],
            // data: convertData(data.sort(function (a, b) {
            //     return b.value - a.value;
            // }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};
  myChart.setOption(option);
function functest(){
  myChart.setOption({
    series: [
        {
            // name:'成交',
            // smooth:true,
            // symbol: 'none',
            // stack: 'a',
            data: res
        },
        // {
        //   data: res.sort(function (a, b) {
        //        return b.value - a.value;
        //    }).slice(0,6)
        // }
    ]

  })
}

  convertData(data);

});
        // 使用刚指定的配置项和数据显示图表。
    </script>
</body>
</html>
